<template>
  <div v-loading="listLoading">
    <!--    附件列表-->
    <el-dialog :visible.sync="dialogVisible">
      <v-empty-data v-if="attachmentList.length===0" style="width: 100px"/>
      <el-row :gutter="20">
        <el-col v-for="(attachment,index) in attachmentList" :key="attachment.id" :xs="6" :sm="4">
          <div class="attachment-item">
            <div class="img">
              <v-image :src="baseUrl +attachment.thumbPath" :alt="attachment.name">
                <div slot="error">
                  <i v-if="attachment.mediaType.search('image') !== -1" class="el-icon-picture-outline"/>
                  <span v-else>{{ attachment.mediaType }}</span>
                </div>
              </v-image>
            </div>
            <div class="name" :title="attachment.name">{{ attachment.name }}</div>
          </div>
        </el-col>
      </el-row>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>

import {getAttachmentList} from "@/api/blog/attachment";

import simpleImage from "@/components/common/simple-image"
import emptyData from "@/components/common/empty-data"

export default {
  name: "importAttachmentList",
  components: {
    "v-image": simpleImage,
    "v-empty-data": emptyData
  },
  data() {
    return {
      dialogVisible: false,
      listLoading: false,
      currentPage: 0,
      pageSize: 10,
      total: 0,
      attachmentList: [],
      host: '',
    }
  },
  created() {
    this.load()
  },
  computed: {
    isImage() {
      const mediaType = this.data.mediaType || ''
      return mediaType.search('image') !== -1
    },
    normalUrl() {
      // return `${this.getServerUrl}${this.data.path}`
      return this.host + this.data.path
    },
  },
  methods: {
    //打开对话框，供父组件使用
    openDialog() {
      this.dialogVisible = true
    },
    load() {
      this.listLoading = true
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      getAttachmentList(params).then(res => {
        this.host = window.location.protocol + '//' + window.location.host + process.env.VUE_APP_BASE_API
        this.attachmentList = res.data.records
        this.currentPage = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.load()
    }
  }
}
</script>

<style scoped>

</style>
